<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	    <title>Hello APP</title>
	    <link rel="stylesheet" type="text/css" href="../../../css/index.css" />
	</head>
	<style type="text/css">
		.warp{width: 100%;}

		.quan-list{width: 100%;padding: 20px 15px;box-sizing: border-box;}
		.quan-list .quan-one{width: 100%;margin-bottom: 10px;padding-bottom: 28%;background: url(../../../image/main3/quan_bg.png) no-repeat center ;background-size:contain;position: relative;top: 0;left: 0;}
		.quan-list .quan-one .l{width: 30%;position: absolute;top: 0;left: 0;height: 100%;color: #FFFFFF;align-items: center;justify-content: center;}
		.quan-list .quan-one .l .lable{font-size: 18px;margin:12px 0 0 -20px;font-weight: bold;}
		.quan-list .quan-one .l .price{font-size: 38px;margin-left: 4px;font-weight: bold;}
		.quan-list .quan-one .l .lable.min{margin:6px 0 0 -10px;}
		.quan-list .quan-one .l .price.min{font-size: 26px;margin-left: 4px;}
		.quan-list .quan-one .l .text{font-size: 24px;}
		.quan-list .quan-one .r{width: 70%;position: absolute;top: 0;right: 0;height: 100%;color: #930D34;padding: 10px 15px 10px 0;box-sizing: border-box;}
		.quan-list .quan-one .r .r-box{background: #ffffff;width: 100%;height: 100%;border-radius:0 4px 4px 0;flex-direction: column;justify-content: center;padding:0 10px 0 15px;box-sizing: border-box;}
		.quan-list .quan-one .r .r-box .title{font-size: 14px;font-weight: 700;color: #333333;width: 100%;}
		.quan-list .quan-one .r .r-box .type{font-size: 12px;padding-top: 4px;color: #9399A5;}
		.quan-list .quan-one .r .r-box .time{font-size: 12px;padding-top: 2px;color: #9399A5;}
		.quan-list .quan-one .sel-one{width: 18px;height: 18px;position: absolute;top: 40px;right: 25px;background:url(../../../image/main2/sel_icon0.png) no-repeat center;background-size:contain;}
		.quan-list .quan-one.on .sel-one{background:url(../../../image/main2/sel_icon1.png) no-repeat center;background-size:contain;}

		.shouhuo-btn{position: fixed;height: 45px;background:#FF9502;border-radius:4px;
		text-align: center;line-height: 45px;font-size: 18px;color: #FFFFFF;bottom: 40px;left: 30px;right: 30px;z-index: 999;}

	</style>
	<body>
		<div id="vue" class="warp">

			<div class="quan-list" style="display:none;" :style="{ display:(Pdata ? '':'none')}">
				<div :class="['quan-one flex',selid == item.id ? 'on':'']" v-for="(item,key) in Pdata.listData" :data-id="item.id" :id="item.id" :data-index="key" tapmode onclick="tabQuan(this)">
					<div class="l flex">
						<div :class="['lable',item.val >= 99 ? 'min':'']" v-if="item.type == 'money'">¥</div>
						<div :class="['price',item.val >= 99 ? 'min':'']" v-if="item.type == 'money'" v-text="item.val"></div>
					</div>
					<div class="r flex">
						<div class="r-box flex">
							<div class="title" v-text="item.title"></div>
							<div class="type" v-text="item.str"></div>
							<div class="time"><i v-text="item.kaidate"></i>-<i v-text="item.enddate"></i></div>
						</div>
					</div>
					<div class="sel-one"></div>
				</div>
			</div>

			<!--占位图-->
			<div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
				<img src="../../../image/no_page/no_youhui.png" />
				<p>暂无优惠券</p>
			</div>

			<div style="width:100%;height:80px;"></div>
			<div class="warp-btn" id="app-footer" tapmode onclick="okQuan()">
	            <div class="btn">确定</div>
	        </div>
		</div>
	</body>
</html>
<script type="text/javascript" src="../../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">

	var quanId = 0;
	var quanIndex = 0;
	define(function (require, exports, module) {
		lanYun.setFooter('app-footer');
		pageParam = api.pageParam;
		_page.getData = function(loading) {
			//console.log(pageParam.price);
			lanYun.getVueData({url:'UserQuan/getListByOrder',body:{page:lanYun.page,orderPrice:pageParam.price},cache:0,loading:loading},function(ret) {
				console.log(JSON.stringify(ret));
			});
		};
		lanYun.newVue('#vue',{
			selid:pageParam.id
		},function() {
			_page.getData(2);
		});

		//选择优惠券
		tabQuan = function (tis){
			if($(tis).hasClass('on')) return;
			var dst = tis.dataset;
			$(tis).addClass('on').siblings().removeClass('on');
			// if($(tis).hasClass('on')){
			// 	$(tis).removeClass('on');
			// }else {
			// 	$(tis).hasClass('on');
			// }
			quanId = dst.id;
			quanIndex = dst.index;
		}

		//选择好的券
		okQuan = function () {
			var data = lanYun.vue.Pdata.listData[quanIndex];
			if(!data){
				lanYun.toast('请选择优惠券');
				return;
			}
			lanYun.setStorage('quanData', data);
	        lanYun.setStorage('update',1);
	        api.closeWin();
		}
	});
</script>
